<template>
  <div class="role">
    <pageTable :data="data" :defaultTable="false" class="role-table" @sizeChange="sizeChange">
    <searchForm slot="top-content" @search="toSearch">
      <a-input slot="nameZh" lable="角色名" v-model="search.condition.nameZh" />
      <a-input slot="roleKey" lable="角色key" v-model="search.condition.roleKey" />
    </searchForm>
    <a-button slot="top-content" type="primary" icon="plus-circle" @click="add(null)">新增</a-button>
    <a-table slot="table-conten" :dataSource="data.records" :columns="cols" bordered :pagination="false">
      <template slot="operation" slot-scope="text, record">
        <a-tooltip placement="top">
          <template slot="title">
            <span>编辑</span>
          </template>
          <a-icon type="form" @click="add(record)" class="opera"/>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            <span>设置权限</span>
          </template>
          <a-icon type="star" @click="setPer(record)" class="opera"/>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            <span>删除</span>
          </template>
          <a-icon type="delete" @click="deleteById(record.id)" class="opera"/>
        </a-tooltip>
      </template>
    </a-table>
  </pageTable>
  <roleEdit ref="roleEdit"/>
  <perTree ref="perTree"/>
  </div>
</template>

<script>
 import pageTable from "@/syscomponents/pageTable.vue";
 import searchForm from "@/syscomponents/searchForm";
 import roleEdit from "./edit"
 import perTree from './perTree'
// import menuEdit from "./setMnue"
import { page,deleteById } from "./api";
const cols = [
        {
          title: "名称",
          dataIndex: "nameZh"
        },
        {
          title: "key值",
          dataIndex: "roleKey"
        },
        {
          title: "备注",
          dataIndex: "note"
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ];
export default {
  components: { pageTable, searchForm,roleEdit,perTree},
  data() {
    return {
      cols,
      data: {records:[]},
      search: {
        perPageCount: 10,
        currentPage: 1,
        orders: [{ column: "createTime" }],
        condition: {}
      }
    };
  },
  mounted() {
    this.page();
  },
  methods: {
    deleteById(id){
      this.$confirm('您确认要删除当前角色吗？','消息提示').then(()=>{
        deleteById(id).then(v=>{
            this.$message.success('删除成功')
            this.page();
        })
      })
    },
    toSearch() {
      this.page();
    },
    sizeChange(current,size){
      this.search.perPageCount=size
      this.search.currentPage = current
      this.page()
    },
    page() {
      page(this.search).then(v => {
        if (v.ok) {
          this.data = v.data;
        } else {
          this.$message.error(v.msg || "操作失败");
        }
      });
    },
    add(record){
      this.$refs.roleEdit.showModal(record,record==null)
    },
    setPer(record){
      this.$refs.perTree.showModal(record.id)
    }
  }
};
</script>

<style>
.role-table .opera{
  margin-right: 15px;
}
</style>